<template>
		<view>
			<!-- <view class="card-bg" :style="{background:'url('+currentPicture+')','background-size': 'cover'}" @click="open">
				<h3>{{title}}</h3> -->
			  <view class="qrcode" @longpress="save">
				  <uv-qrcode size='250' ref="qrcode" :value="url+'/preview.html?formid='+formid+'&type=answer'" :options="qrcode"></uv-qrcode>
			  </view>
			<!-- </view> -->
			<button @click="downLoadImage">保存二维码</button>
			<!-- <uv-popup ref="popup" mode='bottom'>
				<view style="height: 150px;">
					<uv-scroll-list indicatorWidth='20' indicatorBarWidth='10' >
						<view class="custom" @click="upload">
							<image src="@/static/custom.png" style="height: 100px;width: 100px;"  mode="aspectFill"></image>
						</view>
						<view v-for="(item, index) in list" :key="index" @click="changeImg(index)">
							<image :src="item.image" mode="aspectFill" style="height: 100px;width: 100px;"></image>
						</view>
					</uv-scroll-list>
				</view>
			</uv-popup> -->
		</view>
</template>

<script>
	export default{
		data() {
			return {
				formid:"",
				title:"",
				url:this.url,
				qrcode:{
					errorCorrectLevel:'M'
				},
				list: [
					{
						image: "https://img-baofun.zhhainiao.com/fs/6f491f705a299b3fdd571aa5b095058a.jpg"
					},
				],
				currentPicture:"https://img-baofun.zhhainiao.com/fs/6f491f705a299b3fdd571aa5b095058a.jpg"
			}
		},
		onLoad:function(data){
			this.formid = data.formid
			this.title = data.title
		},
		methods:{
			save() {
				console.log(1);
			},
			open(){
				this.$refs.popup.open('buttom');
			},
			changeImg(index){
				this.currentPicture = this.list[index].image
			},
			downLoadImage(){
				this.$refs.qrcode.save({
				 success: (res) => {
				   uni.showToast({
					title:"保存成功",
					icon:"success"
				})
				 }
				});
			},
		}
	}
</script>

<style>
	.card-bg {
	    width: 90vw;
	    height: 80vh;
	    margin: auto;
	  }
		
	h3{
		position: absolute;
		font-size: 18px;
		font-weight: bold;
		color: white;
		margin: 20px;
	}
	
	  .qrcode {
	    position: absolute;
	    left: 50%;
		top: 50%;
	    transform: translate(-50%,-70%);
	  }
	
	  button {
	    background-color: #80b156;
	    color: white;
	    width: 40%;
	    height: 7%;
	    position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	    bottom: 5%;
	    left: 50%;
	    transform: translate(-50%);
	    border-radius: 10px;
	  }
</style>